import styled from 'styled-components'

export const StyledColumn = styled.div<{ w?: number; background?: string }>`
	display: flex;
	flex: ${({ w }) => (w ? `0 0 ${w}px` : '1')};
	flex-direction: column;
	background: ${({ background }) => background};
	position: relative;
	.cell {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		flex: 1 0 100px;
		border-bottom: 1px solid #dedede;
		border-left: 1px solid #dedede;
		.times {
			font-size: 12px;
			text-align: center;
			margin-top: 2px;
		}
		.dotted-slot {
			border-top: 1px dotted #ebebeb;
			flex: 1 0;
			&:first-child {
				border-top: none;
			}
		}
	}
	.current-time-line {
		position: absolute;
		width: 100%;
		height: 2px;
		background: red;
	}
	.current-time-triangle {
		position: absolute;
		width: 0;
		height: 0;
		border-left: 5px solid red;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		margin-top: -3px;
	}
`

export const StyledCalendar = styled.div`
	.calendar-header {
		display: flex;
	}
	.calendar-body {
		display: flex;
		border-top: 1px solid #dedede;
	}
`
